<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/sx.css.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./index-iconfont/">
    <script src="./api/jquery.js"></script>
    <script src="./api/api.js"></script>
    <script src="./JS/slider.js"></script>
    <script src="./JS/startMove.js"></script>
    <script src="./JS/swiper.js"></script>
    <link rel="stylesheet" href="./css/swiper.css">
    <script src="./api/axios.js"></script>
    <script src="./api/data.js"></script>
    <style>
   
        header {
            background-image: url(./img/bj.png);
            width: 100%;
            background-size: 100%;
            background-repeat: no-repeat;
        }

     
    </style>
</head>

<body>
    <div id="home">
        <div class="Nav D_is D_isc">

            <div class="container D_is ">
                <div class="D_is D_isc">
                    <div class="ml_12" style="width: 70px;">
                        <i class="iconfont icon-shouye"></i><span class="navHover ml_5">天猫首页</span>
                    </div>
                    <div class="ml_12" style="width: 100px;">
                        <b>喵，欢迎来天猫</b>
                    </div>
                    <div class="ml_12" id="names">
                        <span id="pd">请登录</span>
                       

                    </div>
                    <div class="ml_12" id="zhuce">
                        <span>免费注册</span>
                    </div>
                </div>
                <div class="D_is D_isc">
                    <div class="ml_12 ass" style="width: 70px;">

                        <span class="hove">我的淘宝<p class="sj"></p></span>
                        <div class="bao">
                            <span>已买到的宝贝</span>
                            <span>已卖出的宝贝</span>
                        </div>
                    </div>
                    <div class="ml_12">
                        <i class="iconfont icon-gouwuchexuanzhong"></i>
                        <span>购物车</span>
                    </div>
                    <div class="ml_12 ass">
                        <span class="hove">收藏夹 <p class="sj"></p></span>
                        <div class="bao">
                            <span>收藏的宝贝</span>
                            <span>收藏的店铺</span>
                        </div>
                    </div>
                    <div class="ml_12">
                        <i class="iconfont icon-shouji"></i>
                        <span>手机版</span>
                    </div>
                    <div class="ml_12">
                        <span>淘宝网 </span>
                    </div>
                    <div class="ml_12">
                        <span>网页无障碍</span>
                    </div>
                    <div class="ml_12 ass" style="width: 70px;">
                        <span class="hove">商家支持 <p class="sj"></p></span>
                        <div class="bao">
                            <span>商家支持</span>
                            <span>天猫会员</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <header>
            <div class="logo container ">
                <img src="./img/logo.png" alt="">
                <input type="text" placeholder="搜索 天猫 商品/品牌/店铺" id="tex">
                <span class="search">搜索</span>
            </div>
            <main class="contai">
                <div class="ztsc">
                    <h2>主题商城</h2>
                    <div class="top">
                        <a href=""><img src="./img/logo1.png" alt=""></a>
                        <a href=""><img src="./img/logo2.png" alt=""></a>
                        <a href="">天猫会员</a>
                        <a href="">喵生鲜</a>
                        <a href="">医药馆</a>
                        <a href="">魅力惠</a>
                        <a href="">飞猪旅行</a>
                        <a href="">苏宁易购</a>
                        <a href="">天猫内容</a>
                    </div>
                </div>
                <div class="content">
                    <div class="ProductTypes">
                        <div class="category">
                            <span class="iconfont icon-nvzhuang"></span>
                            <a href="">女装</a>
                            <i>/</i>
                            <a href="">内衣</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-nanzhuang"></span>
                            <a href="">男装</a>
                            <i>/</i>
                            <a href="">运动户外</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-xiezi"></span>
                            <a href="">女鞋</a>
                            <i>/</i>
                            <a href="">男鞋</a>
                            <i>/</i>
                            <a href="">箱包</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-meizhuang"></span>
                            <a href="">美妆</a>
                            <i>/</i>
                            <a href="">个人护理</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-zuanshi"></span>
                            <a href="">腕表</a>
                            <i>/</i>
                            <a href="">眼镜</a>
                            <i>/</i>
                            <a href="">珠宝饰品</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-shouji1"></span>
                            <a href="">手机</a>
                            <i>/</i>
                            <a href="">数码</a>
                            <i>/</i>
                            <a href="">电脑办公</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-yingerche"></span>
                            <a href="">母婴玩具</a>

                        </div>
                        <div class="category">
                            <span class="iconfont icon-miantiaomian"></span>
                            <a href="">零食</a>
                            <i>/</i>
                            <a href="">茶酒</a>
                            <i>/</i>
                            <a href="">进口食品</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-yingtao"></span>
                            <a href="">生鲜水果</a>

                        </div>
                        <div class="category">
                            <span class="iconfont icon-xingzhuang"></span>
                            <a href="">大家电</a>
                            <i>/</i>
                            <a href="">生活电器</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-jiajujiancai"></span>
                            <a href="">家具</a>
                            <i>/</i>
                            <a href="">灯具</a>
                            <i>/</i>
                            <a href="">卫浴</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-qichepeijian"></span>
                            <a href="">汽车</a>
                            <i>/</i>
                            <a href="">配件</a>
                            <i>/</i>
                            <a href="">用品</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-jiafangjiashi"></span>
                            <a href="">家纺</a>
                            <i>/</i>
                            <a href="">家饰</a>
                            <i>/</i>
                            <a href="">鲜花</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-yiyaobaojian"></span>
                            <a href="">医药保健</a>

                        </div>
                        <div class="category">
                            <span class="iconfont icon-wan"></span>
                            <a href="">厨具</a>
                            <i>/</i>
                            <a href="">收纳</a>
                            <i>/</i>
                            <a href="">宠物</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-luxiangtubiao"></span>
                            <a href="">图像录音</a>

                        </div>


                    </div>
                    <div class="Showpictures">
                        <div class="lb" id="sliderBox">
                            <p class="sliderUl">
                                <a href=""><img src="./img/01.jpg" alt=""></a>
                                <a href=""><img src="./img/02.jpg" alt=""></a>
                                <a href=""><img src="./img/03.jpg" alt=""></a>
                                <a href=""><img src="./img/04.jpg" alt=""></a>
                                <a href=""><img src="./img/05.jpg" alt=""></a>
                                <a href=""><img src="./img/01.jpg" alt=""></a>
                            </p>
                        </div>

                        <div class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <a href=""><img src="./img/06.jpg" alt=""></a>

                                    <div class="whiteBox"></div>
                                    <a href=""><img src="./img/07.jpg" alt=""></a>
                                </div>
                                <div class="swiper-slide">
                                    <a href=""><img src="./img/08.jpg" alt=""></a>
                                    <div class="whiteBox"></div>
                                    <a href=""><img src="./img/09.jpg" alt=""></a>
                                </div>
                                <div class="swiper-slide">
                                    <a href=""><img src="./img/06.jpg" alt=""></a>

                                    <div class="whiteBox"></div>
                                    <a href=""><img src="./img/07.jpg" alt=""></a>
                                </div>
                                <div class="swiper-slide">
                                    <a href=""><img src="./img/08.jpg" alt=""></a>
                                    <div class="whiteBox"></div>
                                    <a href=""><img src="./img/09.jpg" alt=""></a>
                                </div>
                            </div>

                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                    <div class="announcement">
                        <div class="hi">
                            <img src="./img/logo3.jpg" alt="">
                            <p>Hi! name</p>
                        </div>
                        <div class="hi1">
                            <img src="./img/10.jpg" alt="">
                        </div>
                        <div class="hi2">
                            <ul>
                                <li>
                                    <h4>公告</h4>新现实都在这里~
                                </li>
                                <li><span>热点</span>设计创亨家3D设计服务大赛来袭！</li>
                                <li><span>热点</span>全球新发现，毫无开枪就现在！</li>
                                <li><span>热点</span>万款新品流行速递抢先看</li>


                            </ul>
                        </div>
                        <div class="hi3">
                            <ul>
                                <li><span class="iconfont icon-a-wujiaoxingxingxing">
                                    </span>收藏的宝贝</li>
                                <li><span class="iconfont icon-gouwudai"></span>买过的店铺</li>
                                <li><span class="iconfont icon-dianpu"></span>收藏的店铺</li>
                                <li><span class="iconfont icon-shizhong"></span>我的足迹</li>

                            </ul>
                        </div>

                    </div>
                </div>
                <div class="tmcs">

                    <img src="./img/11.jpg" alt="">


                </div>
                <div class="productCategory">
                    <ul id="oUl">
                    </ul>

                </div>
                <div class="tmcs">

                    <img src="./img/31.jpg" alt="">


                </div>
                <div class="commodity">

                    <div class="peng">
                        <img src="./img/12.jpg" alt="">
                        <img src="./img/13.jpg" alt="">
                        <div class="pois">
                            <div>
                                <h4>进口<br>精选</h4>
                            </div>
                            <i></i>

                            <div class="su">
                                <h4>大牌好货</h4>
                                <h6>轻松购入</h6>
                            </div>

                        </div>
                        <div class="pois1">
                            <div>
                                <h4>直营<br>品质</h4>
                            </div>

                            <i></i>

                            <div class="su">
                                <h4>放心体验</h4>
                                <h6>畅享全球</h6>
                            </div>

                        </div>

                    </div>
                    <div class="ju">
                        <ul id="oUl1">
                            <li>
                                <img src="./img/13.jpg" alt="">
                                <p>官方直营</p>
                                <span>极致购物感受</span>
                            </li>

                            <li>
                                <img src="./img/13.jpg" alt="">
                                <p>官方直营</p>
                                <span>￥599</span>
                            </li>
                            <li>
                                <img src="./img/13.jpg" alt="">
                                <p>官方直营</p>
                                <span>￥599</span>
                            </li>
                            <li>
                                <img src="./img/13.jpg" alt="">
                                <p>官方直营</p>
                                <span>￥599</span>
                            </li>
                            <li>
                                <img src="./img/13.jpg" alt="">
                                <p>官方直营</p>
                                <span>￥599</span>
                            </li>

                            <li>
                                <img src="./img/13.jpg" alt="">
                                <p>官方直营</p>
                                <span>￥599</span>
                            </li>

                            <li>
                                <img src="./img/13.jpg" alt="">
                                <p>官方直营</p>
                                <span>￥599</span>
                            </li>

                            <li>
                                <img src="./img/13.jpg" alt="">
                                <p>官方直营</p>
                                <span>￥599</span>
                            </li>



                        </ul>
                    </div>
                </div>
            </main>
        </header>
        <figure class="contai" style="margin-top:50px ;">
            <div class="box">
                <ul id="hddb">
                    <li><img src="./img/y.png" alt=""></li>
                    <li><img src="./img/q.png" alt=""></li>
                    <li><img src="./img/t.png" alt=""></li>
                    <li><img src="./img/b.png" alt=""></li>
                </ul>
            </div>
            <div class="box1">
                <div class="tox">

                   <div class="tox1">
                     <h3>购物指南</h3>
                    <ul>
                        <li>免费注册</li>
                        <li>开通支付宝</li>
                        <li>支付宝充值</li>
                    </ul>
                    </div>
                    <div class="tox1">
                        <h3>天猫保障</h3>
                        
                    <ul>
                        <li>发票保障</li>
                        <li>售后规则</li>
                        <li>物流时效保障</li>
                    </ul>
                    </div>
                    <div class="tox1">
                        <h3>支付方式</h3>
                          <ul>
                        <li>快捷支付</li>
                        <li>信用卡</li>
                        <li>余额宝</li>
                        <li>蚂蚁花呗</li>
                    </ul>
                    </div>
                    <div class="tox1">
                          <h3>商家服务</h3>
                          <ul>
                        <li>天猫规则</li>
                        <li>商家入驻</li>
                        <li>商家中心</li>
                        <li>天猫必修课</li>
                        <li>喵言喵语</li>
                        <li>运营服务</li>
                    </ul>
                    </div>
                    <div class="tox1">
                         <h3>手机天猫</h3> 
                         <img src="./img/e.png" alt="">
                    </div>
                   
             
                
                  
                    
                   
                </div>
            </div>
        </figure>
       <footer>
            <div class="bottom contai">
                           <ul>
                <li>关于天猫</li>
                <li>商家服务大厅</li>
                <li>开放平台</li>
                <li>诚聘英才</li>
                <li>联系我们</li>
                <li>网站合作</li>
                <li>法律声明</li>
                <li>隐私权政策</li>
                <li>知识产权</li>
                <li>廉政举报</li>
                <li>不当竞争举报</li>
            </ul>
            <ul>
                <li>阿里巴巴集团
                    
                    
                    </li>
                <li>│淘宝网</li>
                <li>│天猫</li>
                <li>│聚划算</li>
                <li>│全球速卖通</li>
                <li>│阿里巴巴国际交易市场</li>
                <li>│1688</li>
                <li>│阿里妈妈</li>
                <li>│飞猪</li>
                <li>│阿里云计算</li>
                <li>│AIiOS</li>
                <li>│阿里通信</li>
                <li>│万网</li>
                <li>│高德</li>
                <li>│UC</li>
                <li>│友盟</li>
                <li>│虾米</li>
                <li>│钉钉</li>
                <li>│支付宝</li>
                <li>│阿里安全</li>
                
                
            </ul>
            <img src="./img/f.png" alt="">
            </div>
 
        </footer>

    </div>
 
</body>

</html>
<script>
  
    let ospan = document.querySelectorAll(".ml_12 span")
    let ass = document.getElementsByClassName('ass')
    // let uid = window.localStorage.getItem('uid') || 113699;
    let uid = 113699;
    ass.onmouseover = function () {
        let bao = document.getElementsByClassName('bao')
        bao.style.display = 'block';
    }
    for (let i = 0; i < ospan.length; i++) {
        let price = ospan[i].getAttribute('class') || ''
        let str = price + ' navHover'
        ospan[i].setAttribute("class", str)
    }
   
    let slider1 = new Slider("sliderBox", 520, 280);
    slider1.addArr();
    slider1.addFocus();

    var swiper = new Swiper(".mySwiper", {
        autoplay: true,//可选选项，自动滑动
        autoplay: {
            delay: 3000
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",

        },
    });

    let oUl = document.getElementById('oUl')
    let oUl1 = document.getElementById('oUl1')
    let src = ''
    let listUrl = 'http://jx.xuzhixiang.top/ap/api/productlist.php?uid='+uid
    let productiLst = []
    $.ajax({
        url:listUrl,
        type:'get',
        async:false,
        success:(res)=>{
            productiLst = res.data
            res.data.forEach(qu => {
                src += `
            <li class="oLi">
        <img src="${qu.pimg}" alt="">
        <p>${qu.pname}</p>
        <span>${'￥' + qu.pprice}</span>
        </li>
            `
            });
            oUl.innerHTML = src;
        }
    })

    let oLi = document.querySelectorAll('.oLi')
    for (let i = 0; i < oLi.length; i++) {
        oLi[i].onclick = function() {
            location.href = "item-Details.html?id=" + productiLst[i].pid
            localStorage.setItem('username',aa.data.username)
           
        }
    }
  let a = localStorage.getItem('userData')
  
   let aa=JSON.parse(a)
   let names=document.getElementById('names')
   let pd=document.getElementById('pd')
   let scr=''
   if(a){pd.style.display='none'
    scr+=`
       <span>${'你好' + aa.data.username}</span>
                       
       `
       names.innerHTML=scr
       let ml=document.querySelectorAll('.ml_12')
    for(let i=0 ;i<ml.length;i++){
        ml[i].onclick=function(){

            location.href='shopping-cart.html';
           
        }
    }

   }else{
    let ml=document.querySelectorAll('.ml_12')
    for(let i=0 ;i<ml.length;i++){
        ml[i].onclick=function(){
          
            location.href='login.html'
        }
    }
   }
   let hddb=document.getElementById('hddb')
     let oli=hddb.children;
    console.log(oli)
    for(let i=0;i < oli.length;i++){
         
        oli[i].onclick=function(){
            var a =  document.documentElement.scrollTop || document.body.scrollTop;
            
            var time = setInterval(function(){
              a -= 50
              document.documentElement.scrollTop = a
                if(a<=0){
                clearInterval(time);
                }
            },20)

        }
    }
    let zhuce=document.getElementById('zhuce')
    zhuce.onclick=function(){
        location.href='register.html'
    }
  
</script>